import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { useRef, useState } from 'react';
import getColumns from './columns';
import AddModal from '../Modal/AddModal';
import { InputNumber, Form, Button, Space, message } from 'antd';
import { getMedicineInfo, medicineOut } from '@/services/medicine'
import { proTableFormat, sortTransform } from '@/utils/format'


type IProps = {
    name: string
    actionRef: any
}

export default (props: IProps) => {

    const { name } = props
    const actionRef = useRef<ActionType>();
    const dialogRef = useRef<any>()
    const [item, setItem] = useState({ count: 0, id: '' });
    const columns = getColumns(dialogRef, setItem, props.actionRef);
    const [loading, setLoading] = useState(false);
    const [kc, setKC] = useState(0);
    const [totalMoney, setTotalMoney] = useState(0);
    const onFinish = async (values) => {
        console.log(values);
        if (item.count < values.count) {
            message.warning('出库数量不能大于库存数量!')
            return;
        }
        setLoading(true)
        const result = await medicineOut({ id: item.id, count: values.count })
        if (result.code === 200) {
            dialogRef.current.hideModelRef()
            actionRef.current?.reload(true);
            message.success('出库成功!')
        } else {
            message.error(result.message)
        }
        setLoading(false)
    }
    return (
        <>
            <ProTable
                columns={columns}
                actionRef={actionRef}
                cardBordered
                request={async (params, sort, filter) => {
                    const { pageInfo, data } = await getMedicineInfo({ ...params, name, currentPage: params.current, sort: sortTransform(sort) });
                    setKC(data?.entercount || 0)
                    setTotalMoney(data?.totalprice || 0)
                    return proTableFormat(pageInfo)
                }}
                rowKey="id"
                search={{
                    labelWidth: 'auto',
                    span: 6
                }}
                options={{
                    setting: true,
                    reload: false
                }}
                pagination={{
                    pageSize: 10,
                }}
                dateFormatter="string"
                // 表格新建栏
                toolBarRender={() => {
                    return [
                        <Space>
                            <span>总计金额：￥{totalMoney}</span>
                            <span>总库存数：{kc}</span>
                        </Space>
                    ]
                }}
            />
            <AddModal ref={dialogRef} width={'40%'} title="出库数量选择">
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="出库数量"
                        name="count"
                        rules={[{ required: true, message: '请输入出库数量' }]}
                    >
                        <InputNumber style={{ width: '150px' }} />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit" loading={loading}>
                            确认
                        </Button>
                    </Form.Item>
                </Form>
            </AddModal>
        </>

    );
};